<script>
import UploadImage from '@/components/UploadImage/UploadImage.vue'

export default {
  name: 'disheFlavorForm',
  components: { UploadImage },
  props: {
    dishList: {
      type: Array,
      required: true
    },
    edit: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      formRef: null,
      formData: {
        // 分类di
        categoryId: '',
        // 分类描述
        description: '',
        // 菜品所属口味
        flavors: [],
        // 菜品图片
        image: '',
        // 菜品名称
        name: '',
        // 菜品价格
        price: '',
        // 菜品状态
        status: 1
      },
      formRules: {
        description: [
          { required: true, message: '请输入菜品描述', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '请上传菜品图片', trigger: 'chane' }
        ],
        name: [
          { required: true, message: '请输入菜品名称', trigger: 'blur' }

        ],
        price: [
          { required: true, message: '请输入菜品价格', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请选择菜品分类', trigger: 'change' }
        ]
      }
    }
  },
  emits: ['success'],
  methods: {
    async fetchDishDetail(id) {
      try {
        const data = await this.$store.dispatch('dishStore/fetchDishDetailAction', id)
        this.formData = data
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    async handleSubmit() {
      const validate = await this.$refs.formRef.validate().catch(error => error)
      if (!validate) return
      if (this.edit) {
        try {
          await this.$store.dispatch('dishStore/updateDishAction', this.formData)
          this.$emit('success')
          this.$message.success('编辑菜品成功')
        } catch (error) {
          this.$message.error(error.message)
        }
      } else {
        try {
          await this.$store.dispatch('dishStore/addDishAction', this.formData)
          this.$emit('success')
          this.$message.success('添加菜品成功')
        } catch (error) {
          this.$message.error(error.message)
        }
      }
    },
    resetForm() {
      this.$refs.formRef.resetFields()
    },
    uploadSuccess() {
      this.$refs.formRef.validateField('image')
    }
  }
}
</script>

<template>
  <el-form size="small" label-width="100px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="菜品名称:" prop="name">
      <el-input placeholder="请输入菜品名称" v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="菜品分类:" prop="categoryId">
      <el-select class="select-dish" placeholder="请输入菜品分类" v-model="formData.categoryId">
        <el-option :value="item.id" :label="item.name" v-for="(item) in dishList" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="菜品价格:" prop="price">
      <el-input placeholder="请输入菜品价格" v-model="formData.price"></el-input>
    </el-form-item>
    <el-form-item label="口味做法:">
      <el-button size="small" type="primary" icon="el-icon-plus" v-if="!formData.flavors.length">添加口味</el-button>
      <div class="flavors-container" v-else>
        <div class="flavor-header">
          <span class="title">口味名(3个字内)</span>
        </div>
        <div class="flavor-body">

        </div>
        <div class="flavor-footer">
          <el-button size="small" type="primary" icon="el-icon-plus">添加口味</el-button>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="菜品图片:" prop="image">
      <upload-image v-model="formData.image" @uploadSuccess="uploadSuccess"></upload-image>
    </el-form-item>
    <el-form-item label="菜品描述:" prop="description">
      <el-input type="textarea" :rows="5" placeholder="请输入菜品描述" v-model="formData.description"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button size="small">取消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.select-dish {
  width: 100%;
}

.flavors-container {
  background-color: #fafafb;
  bottom: 1px solid #dfe2e8;
  padding: 10px;

  .flavor-header {
    color: #606168;
  }

  .flavor-body {
    margin: 10px 0;

    .select-flavor {
      width: 120px;
    }
  }
}
</style>
